<template>
    <div>
      <div>
        <span>账号</span> <input v-model="text" type="text" name="" id="" />
      </div>
  
      <div>
        <span>密码</span>
        <input v-model="mima" type="password" />
      </div>
      <div>
        <!-- 如果checkbox 绑定的变量是非数组，那双向绑定的是checkbox的 cheeckbox属性 -->
        如果绑定的是数组，那么选中时就会把此 CheckBox的value
        推送到数组中取消选中，就会从此数组中删除相关value
        <span>选择复选框：</span>
        <input type="checkbox" v-model="hobby" value="篮球" />篮球
        <input type="checkbox" v-model="hobby" value="健身" />健身
        <input type="checkbox" v-model="hobby" value="代码" />代码
      </div>
      <div>
        <h4>来自于哪个城市</h4>
        <select v-model="shi" name="" id="">
          <option value="城市">城市</option>
          <option value="吉林">吉林</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
        </select>
      </div>
      <div>
        <h2>自我介绍</h2>
        <textarea v-model="intro"></textarea>
      </div>
      <div>
        <span>性别</span>
        <input type="radio" v-model="gender" value="male" name="sex" />男
        <input type="radio" v-model="gender" value="felame" name="sex" />女
        <input type="radio" v-model="gender" value="other" name="sex" />中性
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        text: "",
        mima: "",
        hobby: [""],
        shi: "城市",
        intro: "我是默认的",
        gender: " male",
      };
    },
    methods: {},
  };
  </script>
  
  <style>
  </style>